<template>
  <view class="coupon-page">
    <!-- 顶部标签页 -->
    <wd-tabs v-model="activeTab" sticky>
      <wd-tab title="可使用" name="valid" />
      <wd-tab title="已使用" name="used" />
      <wd-tab title="已过期" name="expired" />
    </wd-tabs>

    <!-- 优惠券列表 -->
    <view class="coupon-list" v-if="couponList.length > 0">
      <view class="coupon-item" :class="[activeTab]" v-for="item in couponList" :key="item.id">
        <div class="left">
          <view class="amount">
            <text class="symbol">{{ item.discountType === 1 ? '¥' : '' }}</text>
            <text class="number">{{ formatAmount(item.discountAmount, item.discountType) }}</text>
            <text v-if="item.discountType === 2">折</text>
          </view>
          <view class="condition">满{{ formatAmount(item.minPurchaseAmount) || 0 }}可用</view>
        </div>
        <div class="right">
          <div class="top">
            <span class="name">{{ item.name || '优惠券' }}</span>
          </div>
          <div class="middle">
            <span class="expire-time">{{ item.endDate || '永久有效' }} 过期</span>
            <button class="use-btn" @click="useCoupon(item)" v-if="activeTab === 'valid'">使用</button>
            <text class="status-text" v-else>{{ activeTab === 'used' ? '已使用' : '已过期' }}</text>
          </div>
          <div class="bottom">
            <span class="scope">{{ item.description || '全场通用' }}</span>
          </div>
        </div>
        <view class="mask" v-if="activeTab !== 'valid'"></view>
      </view>
    </view>

    <!-- 加载状态 -->
    <view class="loading-state" v-if="loading">
      <wd-loading type="circular" />
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="!loading && couponList.length === 0">
      <image src="/static/images/empty/coupon-empty.png" mode="aspectFit" />
      <text>暂无优惠券~</text>
    </view>
  </view>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { getCouponList } from '@/api/coupon'
import { formatPrice } from '@/utils/format'
import { onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'

const activeTab = ref('valid')
const couponList = ref([])
const page = ref(1)
const pageSize = ref(10)
const loading = ref(false)
const finished = ref(false)

// 标签页与状态映射
const statusMap = {
  valid: '1',
  used: '2',
  expired: '3'
}

// 加载优惠券列表
const loadCouponList = async (type, isRefresh = false) => {
  if (isRefresh) {
    page.value = 1
    finished.value = false
    couponList.value = []
  }
  
  if (finished.value) return
  
  try {
    loading.value = true
    const params = {
      page: page.value,
      pageSize: pageSize.value,
      status: statusMap[type]
    }
    
    const res = await getCouponList(params)
    const data = res.records || [] // 获取分页数据的记录列表
    
    if (data && data.length > 0) {
      couponList.value.push(...data)
      page.value++
      // 判断是否还有更多数据
      if (couponList.value.length >= res.total) {
        finished.value = true
      }
    } else {
      finished.value = true
    }
  } catch (error) {
    console.error('获取优惠券列表失败:', error)
    uni.showToast({
      title: '获取优惠券列表失败',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

// 监听标签页切换
watch(activeTab, (newVal) => {
  loadCouponList(newVal, true)
})

// 下拉刷新
onPullDownRefresh(() => {
  loadCouponList(activeTab.value, true).finally(() => {
    uni.stopPullDownRefresh()
  })
})

// 上拉加载更多
onReachBottom(() => {
  console.log('触发上拉加载更多')
  if (!loading.value && !finished.value) {
    loadCouponList(activeTab.value)
  }
})

// 格式化优惠券金额显示
const formatAmount = (amount, type) => {
  if (!amount) return '0'
  return formatPrice(amount)
}

// 使用优惠券
const useCoupon = (coupon) => {
  uni.navigateTo({
    url: `/pages/goods/list?couponId=${coupon.id}`
  })
}

onMounted(() => {
  loadCouponList(activeTab.value, true)
})
</script>

<style lang="scss">
.coupon-page {
  min-height: 100vh;
  background: #f8f8f8;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.coupon-list {
  padding: 20rpx;
}

.coupon-item {
  position: relative;
  margin-bottom: 20rpx;
  background: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  display: flex;
  
  &.used,
  &.expired {
    .left {
      .amount {
        color: #999;
      }
    }
    
    .right {
      .name {
        color: #999;
      }
      
      .expire-time {
        color: #999;
      }
      
      .scope {
        color: #999;
      }
    }
  }

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.6);
    pointer-events: none;
  }

  .left {
    width: 200rpx;
    border-right: 1px dashed #eee;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30rpx 0;

    .amount {
      color: #ff4444;
      
      .symbol {
        font-size: 32rpx;
      }
      
      .number {
        font-size: 60rpx;
        font-weight: bold;
      }
    }

    .condition {
      font-size: 24rpx;
      color: #666;
      margin-top: 10rpx;
    }
  }

  .right {
    flex: 1;
    padding: 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .top {
      margin-bottom: 16rpx;
      .name {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
    }

    .middle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;
      position: relative;

      .expire-time {
        color: #666;
        font-size: 24rpx;
      }

      .use-btn {
        position: absolute;
        right: 0;
        padding: 6rpx 20rpx;
        background-color: #ff4400;
        color: white;
        border: none;
        border-radius: 6rpx;
        font-size: 24rpx;
        min-width: 92rpx;
        text-align: center;
        line-height: 1.8;
      }

      .status-text {
        position: absolute;
        right: 0;
        font-size: 24rpx;
        color: #999;
      }
    }

    .bottom {
      .scope {
        color: #999;
        font-size: 28rpx;
      }
    }
  }
}

.loading-state {
  padding: 120rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  image {
    width: 240rpx;
    height: 240rpx;
    margin-bottom: 20rpx;
  }
  
  text {
    font-size: 28rpx;
    color: #999;
  }
}

.empty-state {
  padding: 120rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  image {
    width: 240rpx;
    height: 240rpx;
    margin-bottom: 20rpx;
  }
  
  text {
    font-size: 28rpx;
    color: #999;
  }
}
</style> 